import React from 'react'
import { createBehavior, createResource } from '@designable/core'
import { DnFC, useNodeIdProps } from '@designable/react'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'
import { SuspendedBottom as CustomSuspendedBottom } from '../../customComponents/SuspendedBottom'
import { createCustomVoidFieldSchema } from '../Field'

type SuspendedBottomProps = React.ComponentProps<typeof CustomSuspendedBottom>

export const SuspendedBottom: DnFC<SuspendedBottomProps> = (props) => {
  const nodeIdProps = useNodeIdProps()
  return (
    <div {...nodeIdProps}>
      <CustomSuspendedBottom
        {...props}
        style={{ position: 'unset', backgroundColor: '#eee' }}
      />
    </div>
  )
}

SuspendedBottom.Behavior = createBehavior({
  name: 'SuspendedBottom',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'SuspendedBottom',
  designerProps: {
    droppable: true,
    propsSchema: createCustomVoidFieldSchema(AllSchemas.SuspendedBottom),
  },
  designerLocales: AllLocales.SuspendedBottom,
})

SuspendedBottom.Resource = createResource({
  icon: 'BottomFloating',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'SuspendedBottom',
      },
    },
  ],
})
